De getElementsByTagName methode

Gebruik

Het resultaat van de methode wordt gewoonlijk opgeslagen als de waarde van een variabele:

var tableHeaders = document.getElementsByTagName("th");
var tableRows = document.getElementsByTagName("td");

De methode getElementsByTagName wordt altijd in het meervoud geschreven, en veronderstelt altijd dat er meerdere exemplaren van elk HTML element op de pagina zich bevinden. Ook al staat er slechts één HTML element op de pagina met die tagname, de methode getElementsByTagName retourneert altijd een HTMLCollection, die een array-achtige structuur is.

Met de length methode kan je nagaan hoeveel elementen met die tagname er op een bepaalde webpagina staan. In de Developer Console typ je:

tableHeaders.length;

En het antwoord is:

> 5

De methode getElementsByTagName kan vanuit elke HTML element op de pagina opgeroepen worden om alle kinderen in die welbepaalde tag name te verzamelen in een array. met uitzondering van het element zelf. Als we een table element hebben met id van boeken, dan haalt de volgende JavaScript alle <td> cellen uit de tabel op:

var boekTable = document.getElementById("boeken");
var cellen = boekTable.getElementsByTagName("td");

Je kan dat samentrekken in één statement:

var cellen = document.getElementById("boeken").getElementsByTagName("td");

Nog een voorbeeld

Als we het gebruiken met het table element met id folder kunnen we bijvoorbeeld alle td element ermee ophalen:

var folder = document.getElementById("folder");
var tds = folder.getElementsByTagName("td");

Die twee lijnen code zijn equivalent met de volgende uitgebreide manier van coderen:

var folder = document.getElementById("folder");
var tds = [];
for (var i = 1; i < folder.rows; i++) {
    for (var j = 0; j < folder.rows[i].cells.length; j++) {
        if (folder.rows[i].cells[j].nodeName == "TD") {
            tds.push(folder.rows[i].cells[j]à;
        }
    }
}

Welke de beste techniek is hangt af van de uit te voeren taak. De eerste techniek is de snelste. Voor meer controle is de tweede techniek aangewezen.

document.body

Tenslotte moeten we vermelden dat er één element is die direct geselecteerd kan worden zonder gebruik te maken van één of andere JavaScript methode. De selector: document.body geeft onmiddellijk toegang tot het root body element.